@extends('admin::layouts.master')

@section('title', __('seller::transaction.title'))

@section('content')
@if ($errors->has('error'))
<x-seller-alert type="danger" msg="{{ $errors->first('error') }}" class="mt-4" />
@endif

<div class="card h-min-600">
  <div class="card-body">
    <div id="app" class="bg-light mb-4 p-4">
      <el-form :inline="true" ref="filterForm" :model="filter" class="demo-form-inline" label-width="100px">
        <div>
          <el-form-item label="{{ __('seller::transaction.created_at') }}">
            <el-form-item>
              <el-date-picker format="yyyy-MM-dd" value-format="yyyy-MM-dd" type="date" size="small"
                placeholder="{{ __('common.pick_datetime') }}" v-model="filter.start" style="width: 100%;">
              </el-date-picker>
            </el-form-item>
            <span>-</span>
            <el-form-item>
              <el-date-picker format="yyyy-MM-dd" value-format="yyyy-MM-dd" type="date" size="small"
                placeholder="{{ __('common.pick_datetime') }}" v-model="filter.end" style="width: 100%;">
              </el-date-picker>
            </el-form-item>
          </el-form-item>
      </el-form>

      <div class="row">
        <label class="wp-100"></label>
        <div class="col-auto">
          <button type="button" @click="search" class="btn btn-outline-primary btn-sm">{{ __('common.filter')
            }}</button>
          <button type="button" @click="resetSearch" class="btn btn-outline-secondary btn-sm ms-1">{{ __('common.reset')
            }}</button>
        </div>
      </div>
    </div>
  </div>
  @if (count($transactions))
  <div class="table-push">
    <table class="table">
      <thead>
        <tr>
          <th>{{ __('seller::transaction.id') }}</th>
          <th>{{ __('seller::transaction.description') }}</th>
          <th>{{ __('seller::transaction.amount') }}</th>
          <th>{{ __('seller::transaction.created_at') }}</th>
        </tr>
      </thead>
      <tbody>
        @if (count($transactions))
        @foreach ($transactions as $transaction)
        <tr data-hook-id={{ $transaction->id }}>
          <td>{{ $transaction->id }}</td>
          <td>{{ $transaction->description }}</td>
          <td>{{ currency_format($transaction->amount) }}</td>
          <td>{{ $transaction->created_at }}</td>
        </tr>
        @endforeach
        @else
        <tr>
          <td colspan="9" class="border-0">
            <x-seller-no-data />
          </td>
        </tr>
        @endif
      </tbody>
    </table>
  </div>
  {{ $transactions->withQueryString()->links('admin::vendor/pagination/bootstrap-4') }}
  @else
  <x-seller-no-data />
  @endif
</div>
</div>

@endsection

@push('footer')
<script>
  let app = new Vue({
      el: '#app',
      data: {
        url: @json(admin_route('transactions.index')),
        filter: {
          start: bk.getQueryString('start'),
          end: bk.getQueryString('end'),
        },
      },

      created() {
        bk.addFilterCondition(this);
      },

      methods: {
        search() {
          location = bk.objectToUrlParams(this.filter, this.url)
        },

        resetSearch() {
          this.filter = bk.clearObjectValue(this.filter)
          location = bk.objectToUrlParams(this.filter, this.url)
        },
      }
    });
</script>
@endpush